<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            margin: 60px auto;
        }
        td,th{
            border:1px solid gray ;

        }
    </style>
</head>
<body>
<h3>用户信息</h3>
<button>新增用户</button>
<table style="width: 500px;">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>家庭住址</th>
        <th>联系方式</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="stuContent">

    </tbody>

</table>
</body>
<script>
    var xmlhttp;
    //页面加载时，调用的方法
    window.onload=function(){
        getUserList();
    }

    function getXmlHttp() {
        var xhr;
        // 创建XMLHttpRequest对象
        if (window.XMLHttpRequest) {
            // 支持IE7+以上版本的浏览器
            xhr = new XMLHttpRequest();
        } else {
            // 若浏览器的版本过于老旧，采用下面这种方式
            xhr = new ActiveXObject("Microsoft.XMLHTTP")
        }
        console.log("xhr::", xhr)
        return xhr;
    }
    // 获取用户信息的方法
    function getUserList(){
        //获取xmlhttp
        xmlhttp= getXmlHttp();
        //3 onreadystatechange事件，监听readyState的状态
        xmlhttp.onreadystatechange=function(){
            // xmlhttp.readyState值为4时，则表示用户端已经成功接收响应
            if(xmlhttp.readyState==4){
                // 响应的状态码为200，表示服务器正常响应
                if(xmlhttp.status==200){
                    // 用户响应回来的数据xmlhttp.response进行解析，对数据进行转换
                    let list=JSON.parse(xmlhttp.response)
                    console.log(list)
                    var htmlstr="";
                    // for(stu in list){// 下标
                    for(userInfo of list){
                        htmlstr+=`
                          <tr>
                                <td>${userInfo.id}</td>
                                <td>${userInfo.username}</td>
                                <td>${userInfo.userpwd}</td>
                                <td>${userInfo.useraddress}</td>
                                <td>${userInfo.usertel}</td>
                                <td>
                                <button><a href="">编辑</a></button>
                                 <button><a href="">删除</a></button>
                                </td>
                            </tr>
                        `
                        //原生的dom对象
                        var tbody= document.getElementById("stuContent")
                        tbody.innerHTML=htmlstr
                    }
                }
            }
        }
        //2 调用 open方法
        xmlhttp.open("get","/getUserInfoes",true);
        //4 send
        xmlhttp.send();
    }

</script>
</html>